@charset "utf-8";
/* 20180118 by fanbo */
body{ background:#2e3337; font-size: 16px;}

.back_dark{ background-color:#1e2326; }
.back_white{ background-color:#fff; }

.banner{ color:#fff; position: relative;}
.banner .animat{ background:#1f2326 url(../images/banner_bj.jpg) center 0 no-repeat; height: 624px; overflow: hidden; position: relative;}
.banner .animat .q,.banner .animat .q02{ position: absolute; width: 1943px; height: 1943px; right:50%; bottom:50%; margin: 0 -971px -830px 0;;}
.banner .animat .q{ background:url(../images/ban_q.png) no-repeat; animation:spin 80s linear infinite; -webkit-animation:spin 100s linear infinite;}
.banner .animat .q02{ background:url(../images/ban_q02.png) no-repeat; animation:spin 80s linear infinite; -webkit-animation:spin02 100s linear infinite;}
.banner .hq{ position: absolute; }
.banner .hq01{ width: 368px; height: 257px; background: url(../images/ban_hq01.png) no-repeat; bottom: 50%; right: 50%; margin:0 215px -85px 0; animation:ghostUpdown 4s linear infinite; -webkit-animation:ghostUpdown 4s linear infinite;}
.banner .hq02{ width: 865px; height: 479px; background: url(../images/ban_hq02.png) no-repeat; bottom: 50%; right: 50%; margin: 0 -360px -65px 0; animation:ghostUpdown02 3s linear infinite; -webkit-animation:ghostUpdown02 3s linear infinite;}
.banner .hq03{ width: 243px; height: 244px; background: url(../images/ban_hq03.png) no-repeat; left: 50%; top: 50%; margin: -150px 0 0 500px; animation:ghostUpdown03 3s linear infinite; -webkit-animation:ghostUpdown03 2s linear infinite;}
.banner .hq04{ width: 181px; height: 181px; background: url(../images/ban_hq04.png) no-repeat; right: 50%; bottom: 50%; margin: 0 295px 235px 0; animation:ghostUpdown03 3s linear infinite; -webkit-animation:ghostUpdown 5s linear infinite;}
.banner .con{ position: absolute; left: 0; top: 0; right: 0; z-index: 2;}
.banner .text{ width: 630px; margin:95px auto 0; background:url(../images/banner_t_bj.png) no-repeat; text-align: center;}
.banner .text .h2{ padding-top: 30px; height: 105px; overflow: hidden; position: relative;}
.banner .text .h2 h2{ position: absolute; left: 0; right: 0; top:-105px; font-size: 79.5px; opacity: 0;}
.banner .si-hidden{ -webkit-animation: slide-out 0.6s; -moz-animation: slide-out 0.6s; animation: slide-out 0.6s; }
.banner .text .h2 h2.si-visible{ top: 30px; opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s; }
.banner .text h3{ font-size: 28.6px; font-weight: 400; padding-top: 2px;}
.banner .text p{ font-size: 14px; line-height: 23px; padding: 32px 50px 0;}
.banner .odds{ text-align: center; padding-top: 60px;}

.big_data{ border-top:1px solid #353a3e; height: 625px;}
.title{ text-align: center; padding-top:60px;}
.title h2{ font-size: 30px; color:#00b477; font-weight: 400;}
.title p{ color:#fff; padding-top:17px;}
.big_data .main{ padding-top:80px; }
.big_data ul{}
.big_data li{ width: 16.666666666%; float: left; position: relative; text-align: center; height: 285px; border-radius: 3px;}
.box_super .bd{ display: none; }
.big_data .tubiao{ position: relative; height: 78px; margin-top:35px;}
.big_data .tubiao span{ display: block; margin:0 auto;}
.big_data .tubiao .icon{ width: 78px; height: 78px; background: url(../images/data_icon.png) center 0 no-repeat; position: relative; z-index: 2;}
.big_data li.item02 .tubiao .icon{ background-position: center -78px; }
.big_data li.item03 .tubiao .icon{ background-position: center -156px; }
.big_data li.item04 .tubiao .icon{ background-position: center -234px; }
.big_data li.item05 .tubiao .icon{ background-position: center -312px; }
.big_data li.item06 .tubiao .icon{ background-position: center -390px; }
.big_data .tubiao .gxiao{ width: 140px; height: 63px; background: url(../images/data_icon_g.jpg) center 0 no-repeat; position: absolute; left: 0; right: 0; top: 46px;}
.big_data .tubiao .bj_g{ width: 92px; height: 105px; background: url(../images/data_bj_g.png) center 0 no-repeat; position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; opacity: 0; visibility: hidden;}
.big_data .tubiao .bj_g i{ position: absolute; left: 0; right: 0; height: 100%; filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#1e2326,endcolorstr=rgba(46, 51, 55, 0),gradientType=0); -ms-filter: alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#1e2326,endcolorstr=rgba(46, 51, 55, 0),gradientType=0); background: none; background: -moz-linear-gradient(top, #1e2326, rgba(46, 51, 55, 0)); background: -webkit-gradient(linear, 0 0, 0 bottom, from(#1e2326), to(rgba(46, 51, 55, 0))); background: -o-linear-gradient(top, #1e2326, rgba(46, 51, 55, 0));}

.big_data li h2{ color: #2fffc4; font-weight: 700; font-size: 24px; padding: 40px 0 0 0;}
.big_data li p{ font-size: 16px; color: #b2b2b2; line-height: 22px; padding-top: 4px;}
.big_data .line{ position: absolute; left: 0; right: 0; height: 0; bottom: 33px; }
.big_data .line span{ width: 0; height: 3px; background: #2fffc4; position: absolute; top: 0;}
.big_data .line .left{ right:50%;}
.big_data .line .right{ left: 50%;}
.big_data li.on{ background: #1e2326; box-shadow: 0 0 10px rgba(0, 0, 0, 0.28); transition: all .1s;}
.big_data li.on .tubiao .icon{ animation:ghostUpdown 3s linear infinite; -webkit-animation:ghostUpdown 3s linear infinite;}
.big_data li.on .tubiao .gxiao{ background-image: url(../images/data_icon_g_hover.jpg); transition: all .1s;}
.big_data li.on .tubiao .bj_g{ opacity: 1; visibility: visible; transition: all .3s; animation:bj_g 7s linear infinite; -webkit-animation:bj_g 7s linear infinite;}
.big_data li.on p{color: #2fffc4; transition: all .3s;}
.big_data li.on .line span{ width: 10px; transition: all .3s;}

.advantage{ height: 890px; background:#1e2326 url(../images/ys_bj.jpg) center 0 no-repeat; position: relative;}
.advantage .main{ position: relative; padding-top:273px;}
.advantage .yuansu{ width: 450px; height: 450px; position: absolute; margin-left: -225px; left: 50%; top: 107px;}
.advantage .yuansu .hq{ position: absolute; }
.advantage .yuansu .hq01{ width: 90px; height: 90px; background: url(../images/ys_hq01.png) no-repeat; top: 60px; left: 25px; animation:ghostUpdown 4s linear infinite; -webkit-animation:ghostUpdown 4s linear infinite;}
.advantage .yuansu .hq02{ width: 72px; height: 72px; background: url(../images/ys_hq02.png) no-repeat; top: 100px; right: 20px; animation:ghostUpdown02 3s linear infinite; -webkit-animation:ghostUpdown02 3s linear infinite;}
.advantage .yuansu .hq03{ width: 43px; height: 43px; background: url(../images/ys_hq03.png) no-repeat; left: 145px; bottom: 30px; animation:ghostUpdown03 3s linear infinite; -webkit-animation:ghostUpdown03 3s linear infinite;}
.advantage .yuansu .lq{ position: absolute; bottom: 126px; right: 28px; width: 79px; height: 79px; background: url(../images/ys_lq.png) no-repeat; animation:ghostUpdown03 4s linear infinite; -webkit-animation:ghostUpdown03 4s linear infinite;}
.advantage .yuansu .qiu{ position: absolute; top: 50%; left: 50%; margin: -142px 0 0 -140px; width: 285px; height: 297px; background: url(../images/ys_qiu.png) no-repeat;}
.advantage .yuansu .wang{ position: absolute; top: 50%; left: 50%; margin: -149px 0 0 -145px; width: 287px; height: 287px; background: url(../images/ys_w.png) no-repeat; animation:scale 5s linear infinite; -webkit-animation:scale 5s linear infinite;}
.advantage .yuansu .quan{ position: absolute; left: 50%; top: 50%; margin: -185.5px 0 0 -185.5px; width: 371px; height: 371px; background: url(../images/ys_q.png) no-repeat; opacity: .1; animation:spin 80s linear infinite; -webkit-animation:spin 80s linear infinite;}
.advantage .item{ text-align: center; font-size: 0; }
.advantage .item ul,.matter .main .item ul{ display: inline-block; vertical-align: top; _display: inline; *zoom:1;}
.advantage .item li{ float: left; margin:0 23px;}
.advantage .item li.item03{ margin-left: 498px; }
.advantage .item li a{ display: block; }
.advantage .item .tubiao{ width: 118px; height: 118px; margin:0 auto; overflow: hidden; position: relative;}
.advantage .item .tubiao i{ width: 52px; height: 52px; display: block; margin:33px auto 0; background:url(../images/ys_icon.png) no-repeat;}
.advantage .item li.item02 .tubiao i{ background-position: 0 -52px; }
.advantage .item li.item03 .tubiao i{ background-position: 0 -104px; }
.advantage .item li.item04 .tubiao i{ background-position: 0 -156px; }
.advantage .item .tubiao span{ background:url(../images/ys_q_s.png) no-repeat; position: absolute; top: 0; left: 0; right: 0; bottom:0; opacity: .5; transition: all .3s;}
.advantage .item li h2{ font-size: 20px; color:#2bd0a2; line-height: 1.1; font-weight: 400; padding-top:6px;}
.advantage .item li:hover .tubiao span,.advantage .item li.on .tubiao span{ opacity: 1; animation:spin 80s linear infinite; -webkit-animation:spin 80s linear infinite;}
.advantage .con{ position: absolute; top: 50%; left: 50%; width: 960px; height: 526px; margin: -263px 0 0 -480px; overflow: hidden; visibility: hidden; transition-delay: .9s;}
.advantage .con_box{ position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #181918; transition: transform 0.2s; transition-delay: .4s;}
.advantage .con .close{ width: 34px; height: 34px; background: url(../images/page_icon.png) -148px -87px no-repeat; position: absolute; top: 38px; right: 24px; visibility: hidden; opacity: 0; transition: all 0.5s; z-index: 1;}
.advantage .con ul{ opacity: 0; transition: all 0.5s; transform: translateY(10%); }
.advantage .con li{ padding: 67px 61px; padding-bottom: 0; }
.advantage .con .box{}
.advantage .con .box img{ vertical-align: top; margin-bottom: 33px; width: 435px; height: 240px; }
.advantage .con .box h2{ font-size: 30px; color: #00b477; line-height: 1.1; position: relative; padding-bottom: 50px; }
.advantage .con .box h2 em{ width: 15px; height: 15px; border: 3px solid #00b477; border-radius: 50%; position: absolute; left: -36px; bottom: 15px; }
.advantage .con .box h2 i{ width: 44px; height: 6px; background: #00b477; position: absolute; left: 0; bottom: 22px; }
.advantage .con .box p{ font-size: 16px; color: #fff; line-height: 26px; padding-right: 300px; }
.advantage .con.show{ visibility: visible; transition-delay: .0s;}
.advantage .con.show .con_box{ transform: translate3d(-100%,0,0); transition-delay: .0s;}
.advantage .con.show .close{ opacity: 1; visibility: visible; transition-delay: .3s;}
.advantage .con.show ul{ opacity: 1; transform: translateY(0); transition-delay: .3s;}

.matter .title h2{ color:#3d3d3d; }
.matter .title p{ color:#b2b2b2; }

.matter{ height: 860px; }
.matter .main{ text-align: center; padding-top:57px;}
.matter .main li{ width: 281px; height: 280px; float: left; border:1px solid #f1f1f1; margin:0 10px 20px; transition: all .3s;}
.matter .main li.item01,.matter .main li.item05{ margin-left:0; }
.matter .main li.item04,.matter .main li.item08{ margin-right:0; }
.matter .main li i{ width: 35px; height: 36px; background: url(../images/matter_icon.png) no-repeat; display: block; margin:60px auto 0; }
.matter .main li.item02 i{ background-position: 0 -36px; }
.matter .main li.item03 i{ background-position: 0 -72px; }
.matter .main li.item04 i{ background-position: 0 -108px; }
.matter .main li.item05 i{ background-position: 0 -144px; }
.matter .main li.item06 i{ background-position: 0 -180px; }
.matter .main li.item07 i{ background-position: 0 -216px; }
.matter .main li.item08 i{ background-position: 0 -252px; }
.matter .main li h2{ font-size: 18px; color: #333; line-height: 1.1; padding: 18px 0 15px; font-weight: 400;}
.matter .main li span{ width: 40px; height: 1px; display: block; margin:0 auto; background: #f1f1f1;}
.matter .main li p{ font-size: 14px; color: #999; padding: 20px 30px 0; line-height: 26px;}
.matter .main li:hover{ -webkit-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.05); -moz-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.05); box-shadow:0px 3px 8px rgba(0, 0, 0, 0.05); transform: translateY(-5px);}

.distributed{ height: 930px; }
.distributed .main{ padding-top:50px; text-align: center;}
.distributed .main img{ vertical-align: top; }
.distributed .map {position: relative; }
.news_tishi {position: absolute; left: 50%; top: 50%; visibility: hidden; opacity: 0; -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); transform: translateY(-30%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
.news_tishi .bzhu {width: 9px; height: 30px; position: relative; }
.news_tishi .bzhu span {width: 9px; height: 9px; background: url(../images/page_icon.png) -123px -88px no-repeat; position: absolute; left: 0; bottom: -4px; }
.news_tishi .bzhu i {position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; overflow: hidden; background: #00b477; }
.news_tishi .text {background: rgba(0, 180, 119, .7); height: 30px; line-height: 30px; border-radius: 30px; padding: 0 13px; color: #fff; font-size: 14px; white-space: nowrap; position: absolute; right: -16px; top: -23px; }
.news_tishi .text span {color: #f6ff00; padding-right: 6px; }
.news_tishi.show{ visibility: visible; opacity: 1; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0);}
.tishi01{ margin:-105px 0 0 165px; }
.tishi02{ margin:-68px 0 0 110px; }
.tishi03{ margin:-45px 0 0 172px; }
.tishi04{ margin:-10px 0 0 125px; }
.tishi05{ margin:16px 0 0 216px; }
.tishi06{ margin:74px 0 0 217px; }
.tishi07{ margin:87px 0 0 26px; }
.tishi08{ margin:113px 0 0 116px; }
.tishi09{ margin:182px 0 0 188px; }
.tishi010{ margin:208px 0 0 120px; }
.tishi011{ margin:45px 0 0 176px; }
.tishi012{ margin:56px 0 0 235px; }
.tishi013{ margin:70px 0 0 135px; }
.tishi014{ margin:104px 0 0 157px; }
.tishi015{ margin:143px 0 0 28px; }
.tishi016{ margin:167px 0 0 78px; }
.tishi017{ margin:172px 0 0 -27px; }
.tishi018{ margin:-180px 0 0 307px; }
.tishi019{ margin:-92px 0 0 175px; }
.tishi020{ margin:-79px 0 0 22px; }
.tishi021{ margin:-71px 0 0 137px; }
.tishi022{ margin:-43px 0 0 -41px; }
.tishi023{ margin:-1px 0 0 60px; }
.tishi024{ margin:67px 0 0 -9px; }
.tishi025{ margin:-215px 0 0 307px; }
.tishi026{ margin:-178px 0 0 -238px; }
.tishi027{ margin:-142px 0 0 262px; }
.tishi028{ margin:-123px 0 0 97px; }
.tishi029{ margin:-103px 0 0 -90px; }
.tishi030{ margin:80px 0 0 -190px; }

@-webkit-keyframes bj_g{
	0% {background-position: center 192px;}
	100% {background-position: center -192px;}
}
@keyframes bj_g{
	0% {background-position: center 0;}
	100% {background-position: center -146px;}
}
@keyframes ghostUpdown{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-10px);}
	100%{ transform: translateY(0);}
}
@-webkit-keyframes ghostUpdown{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-10px);}
	100%{ transform: translateY(0);}
}
@keyframes ghostUpdown02{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-6px);}
	100%{ transform: translateY(0);}
}
@-webkit-keyframes ghostUpdown02{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-6px);}
	100%{ transform: translateY(0);}
}
@keyframes ghostUpdown03{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-3px);}
	100%{ transform: translateY(0);}
}
@-webkit-keyframes ghostUpdown03{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-3px);}
	100%{ transform: translateY(0);}
}
@keyframes spin{
	100%{ transform:rotate(360deg);}
}
@-webkit-keyframes spin02{
	100%{ transform:rotate(360deg);}
}
@keyframes spin02{
	100%{ transform:rotate(-360deg);}
}
@-webkit-keyframes scale{
	0%{ transform: scale(1,1);}
	50%{ transform: scale(1.02,1.02);}
	100%{ transform: scale(1,1);}
}
@keyframes scale{
	0%{ transform: scale(1,1);}
	50%{ transform: scale(1.02,1.02);}
	100%{ transform: scale(1,1);}
}
@-webkit-keyframes spin{
	100%{ transform:rotate(-360deg);}
}
@-webkit-keyframes slide-in {
	0% { opacity: 0; -webkit-transform: translateY(-100%);}
	60% { opacity: 1; -webkit-transform: translateY(10%);}
	100% {opacity: 1; -webkit-transform: translateY(0); } }
@-moz-keyframes slide-in {
	0% {opacity: 0; -moz-transform: translateY(-100%); }
	60% {opacity: 1; -moz-transform: translateY(10%); }
	100% {opacity: 1; -moz-transform: translateY(0); } }
@keyframes slide-in {
	0% {opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); }
	60% {opacity: 1; -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); }
	100% {opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
}